<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>库存管理 - 仓储管理系统</title>
    <link rel="stylesheet" href="../css/style.css">
</head>
<body>
<div class="app-container">
    <aside class="sidebar">
        <!-- 同首页的侧边栏 -->
    </aside>

    <main class="main-content">
        <header class="content-header">
            <h1>库存管理</h1>
            <div class="actions">
                <button class="btn-primary">新增商品</button>
                <button class="btn-secondary">导出数据</button>
                <input type="text" placeholder="搜索商品..." class="search-input">
            </div>
        </header>

        <div class="filter-bar">
            <select>
                <option>所有仓库</option>
                <option>主仓库</option>
                <option>备件库</option>
            </select>
            <select>
                <option>所有分类</option>
                <option>电子产品</option>
                <option>办公用品</option>
            </select>
            <select>
                <option>所有状态</option>
                <option>库存充足</option>
                <option>库存预警</option>
                <option>缺货</option>
            </select>
        </div>

        <table class="data-table">
            <thead>
            <tr>
                <th>商品编码</th>
                <th>商品名称</th>
                <th>规格型号</th>
                <th>分类</th>
                <th>当前库存</th>
                <th>单位</th>
                <th>库位</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>SP20230001</td>
                <td><a href="detail.html">笔记本电脑</a></td>
                <td>ThinkPad X1 Carbon</td>
                <td>电子产品</td>
                <td class="text-right">125</td>
                <td>台</td>
                <td>A-12-05</td>
                <td><span class="status-badge status-ok">库存充足</span></td>
                <td>
                    <button class="btn-sm">调整</button>
                    <button class="btn-sm">转移</button>
                </td>
            </tr>
            <!-- 更多行数据 -->
            </tbody>
        </table>

        <div class="pagination">
            <button disabled>上一页</button>
            <span class="current">1</span>
            <button>2</button>
            <button>3</button>
            <button>下一页</button>
        </div>
    </main>
</div>
<script src="../js/main.js"></script>
</body>
</html>